<template>
	<view class="page">
		<view>
			<view class="nav-style"
				:style="{'height':navHeight-15+'px','padding-top':15+'px','lineHeight':navHeight+'px','fontWeight':600,'fontSize':18+'px'}">
				<image style="width: 40rpx;height: 40rpx;" src="/static/image/back.png" mode="aspectFit" @click="back"></image>
				库存管理
			</view>

			<view class="table" style="overflow: hidden;">
				<uni-table ref="table" :loading="loading" stripe type="" emptyText="暂无更多数据"
					@selection-change="selectionChange">
					<uni-tr style="border-radius: 20rpx;">
						<uni-th  align="center">设备编号</uni-th>
						<uni-th  align="center">入库时间</uni-th>
						<uni-th  align="center">设备来源</uni-th>
						<uni-th  align="center">设备状态</uni-th>
						<uni-th align="center">入库操作人员</uni-th>
						<uni-th  align="center" class="fixed-column">操作</uni-th>
					</uni-tr>
					<uni-tr  v-for="(item, index) in tableData" :key="index">
						<uni-td align="center">{{item.deviceno}}</uni-td>
						<uni-td align="center">{{ item.outtime.slice(0,10) }}</uni-td>
						<uni-td align="center">{{ item.devicesource }}</uni-td>
						<uni-td align="center">{{ item.status }}</uni-td>
						<uni-td align="center">{{ item.name }}</uni-td>
						<uni-td align="center" class="fixed-column">
							<view class="uni-group">
								<button class="uni-button2" size="mini" type="warn" :data-detail="item" @click="deleteOne">删除</button>
							</view>
						</uni-td>
					</uni-tr>
				</uni-table>
				<view class="uni-pagination-box"  style="width: 50%;">
					<uni-pagination show-icon :page-size="search.pagesize" :current="search.pagenumber"
						:total="total" @change="change" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		FindLoginUser,
		GetOutboundList,
		DeleteDevice
	} from '../../utils/api.js'
	import uuid from '@/js_sdk/com-ls-utils/components/ls-utils/index.js';
	export default {
		data() {
			return {
				statusBarHeight: '',
				navHeight: '',
				tableData: [],
				search: {
					deviceno: '',
					outtimestart: '',
					outtimeend: '',
					devicesource: '',
					pagenumber: 1,
					pagesize: 10,
					name: ''
				},
				total: 0,
				deviceList: ''
			}
		},
		onShow() {
		},
		onLoad(op) {
			this.GetList()
			var that = this
			//获取手机系统的信息（在这主要是获取状态栏和胶囊的高度）
			uni.getSystemInfo({
				success: (e) => {
					// this.compareVersion(e.SDKVersion, '2.5.0')
					let statusBar = 0
					let customBar = 0
					// #ifdef MP
					statusBar = e.statusBarHeight
					customBar = e.statusBarHeight + 45
					if (e.platform === 'android') {
						// this.$store.commit('SET_SYSTEM_IOSANDROID', false)
						customBar = e.statusBarHeight + 50
					}
					// #endif
					// #ifdef MP-WEIXIN
					statusBar = e.statusBarHeight
					// @ts-ignore
					const custom = wx.getMenuButtonBoundingClientRect()
					customBar = custom.bottom + custom.top - e.statusBarHeight
					// #endif
		
					// #ifdef APP-PLUS
					console.log('app-plus', e)
					statusBar = e.statusBarHeight
					customBar = e.statusBarHeight + 45
					// #endif
		
		
					// #ifdef H5
					statusBar = 0
					customBar = e.statusBarHeight + 45
					// #endif
		
					// 这里你可以自己决定存放方式，建议放在store中，因为store是实时变化的
					this.statusBarHeight = statusBar
					this.navHeight = customBar
				}
			})
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			async GetList() {
				uni.showLoading({
					title: '加载中',
				});
				await GetOutboundList(this.search).then((res)=>{
					if(res.code == 200){
						uni.hideLoading();
						this.total = res.total
						this.tableData = res.data
					}
					console.log(res);
				})
			},
			deleteOne(e){
				// this.deviceList =
				// console.log(this.deviceList);
				var that = this
				uni.showModal({
					title: '提示',
					content: '确认删除该条数据?',
					success: function (res) {
						if (res.confirm) {
							DeleteDevice(e.target.dataset.detail.id.toString()).then((res)=>{
								console.log(res);
								if(res.code == 200){
									uni.showToast({
										icon: 'none',
										title: res.message,
										duration: 2000
									});
									
									setTimeout(() => {
									  that.deviceList = ''
									  that.GetList()
									}, 1000);
									
								}else{
									uni.showToast({
										title: res.message,
										icon: 'error',
										duration: 2000
									})
								}
							})
						} else if (res.cancel) {
							
						}
					}
				});
				// console.log(e.target.dataset.detail);
				
			},
			change(val) {
				console.log(val);
				this.search.pagenumber = val.current
				this.GetList()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		width: 100vw;
		height: 100vh;
		position: relative;
		.table {
			position: absolute;
			top: 17%;
			left: 30rpx;
			width: 690rpx;
			// height: 100%;
			background: #FFFFFF;
			border-radius: 25rpx;
		}
		.fixed-column {
		  position: sticky;
		  right: 0;
		  z-index: 2;
		  background-color: #fff;
		  /* 添加阴影效果更好区分 */
		  box-shadow: 2px 0 5px rgba(0,0,0,0.3);
			border: none;
		}
.nav-style {
		background-image: url('https://www.shlxkj.info:10010/%E5%81%A5%E5%BA%B7%E6%A1%A3%E6%A1%88/zsafimg/bgimg.png');
			background-size: cover;
			background-repeat: no-repeat;
			position: fixed;
			top: 0;
			right: 0;
			left: 0;
			z-index: 1000;
			display: flex;
			padding-left: 23rpx;
			align-items: center;
			justify-content: center;

			image {
				position: absolute;
				left: 15px;
			}

			text {
				position: absolute;
				right: 15px;
			}
		}

		::v-deep .thead{
			background-color: #E1F2FF !important;
			border: none !important;
		}
		::v-deep .uni-table .tr:nth-child(2n+1) {
		    background-color: #F3FAFF !important;
				border: none !important;
		}
		
		.uni-forms-item {
			display: flex;
			align-items: center;
		}
	}
</style>